<!DOCTYPE html>



<html lang="en" class="no-js"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>CSS3图片Hover</title>

		<meta name="author" content="Codrops">
		<link href="./css/css" rel="stylesheet" type="text/css">
		<link rel="stylesheet" type="text/css" href="./css/normalize.css">
		<link rel="stylesheet" type="text/css" href="./css/demo.css">
		<link rel="stylesheet" type="text/css" href="./css/set2.css">
		<link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css">
		<link rel="stylesheet" type="text/css" href="./css/demoadpacks.css">
		

		<!--[if IE]>

  		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

		<![endif]-->

		

	

    </head>

	<body>

		<div class="container">

		s

			<header class="codrops-header">

				<h1>图片Hover大法 <span>CSS3控制鼠标经过图片变化</span></h1>

				

			</header>

			<div class="content">

				<h2>Julia</h2>

				<div class="grid"><!-- 必须要 -->

					<figure class="effect-julia"><!-- 必须要 -->

						<img src="./css/21.jpg" alt="img21">

						<figcaption><!-- 图片里的文字放在这里-->

							<h2>Passionate <span>Julia</span></h2><!-- 没有划过前的文字内容 -->

							<div><!-- 画过图片时显现出来的文字 -->

								<p>Julia dances in the deep dark</p>

								<p>She loves the smell of the ocean</p>

								<p>And dives into the morning light</p>

							</div>

							<a href="#/index2.html#">View more</a>

						</figcaption>			

					</figure>

					<figure class="effect-julia">

						<img src="./css/22.jpg" alt="img22">

						<figcaption>

							<h2>Passionate <span>Julia</span></h2>

							<div>

								<p>Julia dances in the deep dark</p>

								<p>She loves the smell of the ocean</p>

								<p>And dives into the morning light</p>

							</div>

							<a href="#/index2.html#">View more</a>

						</figcaption>			

					</figure>

				</div>

				<h2>Goliath</h2>

				<div class="grid">

					<figure class="effect-goliath">

						<img src="./css/23.jpg" alt="img23">

						<figcaption>

							<h2>Thoughtful <span>Goliath</span></h2>

							<p>When Goliath comes out, you should run.</p>

							<a href="#/index2.html#">View more</a>

						</figcaption>			

					</figure>

					<figure class="effect-goliath">

						<img src="./css/24.jpg" alt="img24">

						<figcaption>

							<h2>Thoughtful <span>Goliath</span></h2>

							<p>When Goliath comes out, you should run.</p>

							<a href="#/index2.html#">View more</a>

						</figcaption>			

					</figure>

				</div>

				<h2>Hera</h2>

				<div class="grid">

					<figure class="effect-hera">

						<img src="./css/17.jpg" alt="img17">

						<figcaption>

							<h2>Tender <span>Hera</span></h2>

							<p>

								<a href="#/index2.html#"><i class="fa fa-fw fa-file-pdf-o"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-file-image-o"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-file-archive-o"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-file-code-o"></i></a>

							</p>

						</figcaption>			

					</figure>

					<figure class="effect-hera">

						<img src="./css/25.jpg" alt="img25">

						<figcaption>

							<h2>Tender <span>Hera</span></h2>

							<p>

								<a href="#/index2.html#"><i class="fa fa-fw fa-file-pdf-o"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-file-image-o"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-file-archive-o"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-file-code-o"></i></a>

							</p>

						</figcaption>			

					</figure>

				</div>

				<h2>Winston</h2>

				<div class="grid">

					<figure class="effect-winston">

						<img src="./css/30.jpg" alt="img30">

						<figcaption>

							<h2>Jolly <span>Winston</span></h2>

							<p>

								<a href="#/index2.html#"><i class="fa fa-fw fa-star-o"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-comments-o"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-envelope-o"></i></a>

							</p>

						</figcaption>			

					</figure>

					<figure class="effect-winston">

						<img src="./css/1.jpg" alt="img01">

						<figcaption>

							<h2>Jolly <span>Winston</span></h2>

							<p>

								<a href="#/index2.html#"><i class="fa fa-fw fa-star-o"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-comments-o"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-envelope-o"></i></a>

							</p>

						</figcaption>			

					</figure>

				</div>

				<h2>Selena</h2>

				<div class="grid">

					<figure class="effect-selena">

						<img src="./css/10.jpg" alt="img10">

						<figcaption>

							<h2>Happy <span>Selena</span></h2>

							<p>Selena is a tiny-winged bird.</p>

							<a href="#/index2.html#">View more</a>

						</figcaption>			

					</figure>

					<figure class="effect-selena">

						<img src="./css/31.jpg" alt="img31">

						<figcaption>

							<h2>Happy <span>Selena</span></h2>

							<p>Selena is a tiny-winged bird.</p>

							<a href="#/index2.html#">View more</a>

						</figcaption>			

					</figure>

				</div>

				<h2>Terry</h2>

				<div class="grid">

					<figure class="effect-terry">

						<img src="./css/16.jpg" alt="img16">

						<figcaption>

							<h2>Noisy <span>Terry</span></h2>

							<p>

								<a href="#/index2.html#"><i class="fa fa-fw fa-download"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-heart"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-share"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-tags"></i></a>

							</p>

						</figcaption>			

					</figure>

					<figure class="effect-terry">

						<img src="./css/26.jpg" alt="img26">

						<figcaption>

							<h2>Noisy <span>Terry</span></h2>

							<p>

								<a href="#/index2.html#"><i class="fa fa-fw fa-download"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-heart"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-share"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-tags"></i></a>

							</p>

						</figcaption>			

					</figure>

				</div>

				<h2>Phoebe</h2>

				<div class="grid">

					<figure class="effect-phoebe">

						<img src="./css/3.jpg" alt="img03">

						<figcaption>

							<h2>Plain <span>Phoebe</span></h2>

							<p>

								<a href="#/index2.html#"><i class="fa fa-fw fa-user"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-heart"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-cog"></i></a>

							</p>

						</figcaption>			

					</figure>

					<figure class="effect-phoebe">

						<img src="./css/7.jpg" alt="img07">

						<figcaption>

							<h2>Plain <span>Phoebe</span></h2>

							<p>

								<a href="#/index2.html#"><i class="fa fa-fw fa-user"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-heart"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-cog"></i></a>

							</p>

						</figcaption>			

					</figure>

				</div>

				<h2>Apollo</h2>

				<div class="grid">

					<figure class="effect-apollo">

						<img src="./css/18.jpg" alt="img18">

						<figcaption>

							<h2>Strong <span>Apollo</span></h2>

							<p>Apollo's last game of pool was so strange.</p>

							<a href="#/index2.html#">View more</a>

						</figcaption>			

					</figure>

					<figure class="effect-apollo">

						<img src="./css/22.jpg" alt="img22">

						<figcaption>

							<h2>Strong <span>Apollo</span></h2>

							<p>Apollo's last game of pool was so strange.</p>

							<a href="#/index2.html#">View more</a>

						</figcaption>			

					</figure>

				</div>

				<h2>Kira</h2>

				<div class="grid">

					<figure class="effect-kira">

						<img src="./css/17.jpg" alt="img17">

						<figcaption>

							<h2>Dark <span>Kira</span></h2>

							<p>

								<a href="#/index2.html#"><i class="fa fa-fw fa-home"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-download"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-heart"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-share"></i></a>

							</p>

						</figcaption>			

					</figure>

					<figure class="effect-kira">

						<img src="./css/5.jpg" alt="img05">

						<figcaption>

							<h2>Dark <span>Kira</span></h2>

							<p>

								<a href="#/index2.html#"><i class="fa fa-fw fa-home"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-download"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-heart"></i></a>

								<a href="#/index2.html#"><i class="fa fa-fw fa-share"></i></a>

							</p>

						</figcaption>			

					</figure>

				</div>

				<h2>Steve</h2>

				<div class="grid">

					<figure class="effect-steve">

						<img src="./css/29.jpg" alt="img29">

						<figcaption>

							<h2>Lonely <span>Steve</span></h2>

							<p>Steve was afraid of the Boogieman.</p>

							<a href="#/index2.html#">View more</a>

						</figcaption>			

					</figure>

					<figure class="effect-steve">

						<img src="./css/33.jpg" alt="img33">

						<figcaption>

							<h2>Lonely <span>Steve</span></h2>

							<p>Steve was afraid of the Boogieman.</p>

							<a href="#/index2.html#">View more</a>

						</figcaption>			

					</figure>

				</div>

				<h2>Moses</h2>

				<div class="grid">

					<figure class="effect-moses">

						<img src="./css/24.jpg" alt="img24">

						<figcaption>

							<h2>Cute <span>Moses</span></h2>

							<p>Moses loves to run after butterflies.</p>

							<a href="#/index2.html#">View more</a>

						</figcaption>			

					</figure>

					<figure class="effect-moses">

						<img src="./css/20.jpg" alt="img20">

						<figcaption>

							<h2>Cute <span>Moses</span></h2>

							<p>Moses loves to run after butterflies.</p>

							<a href="#/index2.html#">View more</a>

						</figcaption>			

					</figure>

				</div>

				<h2>Jazz</h2>

				<div class="grid">

					<figure class="effect-jazz">

						<img src="./css/25.jpg" alt="img25">

						<figcaption>

							<h2>Dynamic <span>Jazz</span></h2>

							<p>When Jazz starts to chase cars, the whole world stands still.</p>

							<a href="#/index2.html#">View more</a>

						</figcaption>			

					</figure>

					<figure class="effect-jazz">

						<img src="./css/6.jpg" alt="img06">

						<figcaption>

							<h2>Dynamic <span>Jazz</span></h2>

							<p>When Jazz starts to chase cars, the whole world stands still.</p>

							<a href="#/index2.html#">View more</a>

						</figcaption>			

					</figure>

				</div>

				<h2>Ming</h2>

				<div class="grid">

					<figure class="effect-ming">

						<img src="./css/9.jpg" alt="img09">

						<figcaption>

							<h2>Funny <span>Ming</span></h2>

							<p>Ming sits in the corner the whole day. She's into crochet.</p>

							<a href="#/index2.html#">View more</a>

						</figcaption>			

					</figure>

					<figure class="effect-ming">

						<img src="./css/8.jpg" alt="img08">

						<figcaption>

							<h2>Funny <span>Ming</span></h2>

							<p>Ming sits in the corner the whole day. She's into crochet.</p>

							<a href="#/index2.html#">View more</a>

						</figcaption>			

					</figure>

				</div>

				<h2>Lexi</h2>

				<div class="grid">

					<figure class="effect-lexi">

						<img src="./css/12.jpg" alt="img12">

						<figcaption>

							<h2>Altruistic <span>Lexi</span></h2>

							<p>Each and every friend is special. Lexi won't hide a single cookie.</p>

							<a href="#/index2.html#">View more</a>

						</figcaption>			

					</figure>

					<figure class="effect-lexi">

						<img src="./css/3.jpg" alt="img03">

						<figcaption>

							<h2>Altruistic <span>Lexi</span></h2>

							<p>Each and every friend is special. Lexi won't hide a single cookie.</p>

							<a href="#/index2.html#">View more</a>

						</figcaption>			

					</figure>

				</div>

				<h2>Duke</h2>

				<div class="grid">

					<figure class="effect-duke">

						<img src="./css/27.jpg" alt="img27">

						<figcaption>

							<h2>Messy <span>Duke</span></h2>

							<p>Duke is very bored. When he looks at the sky, he feels to run.</p>

							<a href="#/index2.html#">View more</a>

						</figcaption>			

					</figure>

					<figure class="effect-duke">

						<img src="./css/17.jpg" alt="img17">

						<figcaption>

							<h2>Messy <span>Duke</span></h2>

							<p>Duke is very bored. When he looks at the sky, he feels to run.</p>

							<a href="#/index2.html#">View more</a>

						</figcaption>			

					</figure>

				</div>

			</div>

			

			

	</div>

</body></html>